<template>
  <div class="coord-picker">
    <div class="map-container">
      <div class="mapcontainer">
        <div
          class="absolute black-bg"
          style="
            z-index: 9999;

            width: 100%;
            padding: 10px 12px;
          "
        >
          <div class="flex-row" style="margin-bottom: 10px">
            <span>搜索条件：</span>
            <el-radio-group v-model="radioSearch" v-if="!see">
              <el-radio border label="0">按关键字搜索</el-radio>
              <el-radio border label="1"> 按坐标搜索</el-radio>
            </el-radio-group>
          </div>
          <el-form
            ref="ruleForm"
            class="demo-form-inline"
            style="display: flex"
            :inline="true"
          >
            <div class="relate" style="position: relate">
              <el-form-item label="地址" class="search-box">
                <el-input
                  v-model="searchKey"
                  v-if="!see"
                  type="search"
                  id="search"
                  style="width: 219px"
                  placeholder="请输入关键字进行搜索"
                  :disabled="radioSearch == '1' ? true : false"
                />
              </el-form-item>
              <div class="tip-box" id="searchTip" ref="searchTip"></div>
            </div>
            <b style="width: 12px; background: #ccc; height: 100%"></b>
            <el-form-item label="经度" prop="lng">
              <el-input
                maxlength="11"
                v-model="lng"
                style="width: 219px"
                :disabled="radioSearch == '0' ? true : false"
              ></el-input>
            </el-form-item>
            <el-form-item label="维度：" prop="lat">
              <el-input
                maxlength="10"
                v-model="lat"
                style="width: 219px"
                :disabled="radioSearch == '0' ? true : false"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                v-if="!see"
                class="btn submit"
                type="primary"
                @click="searchByHand"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </div>

        <el-amap
          class="amap-box"
          :amap-manager="amapManager"
          :vid="'amap-vue'"
          :zoom="zoom"
          :plugin="plugin"
          :events="events"
          :center="center"
        >
          <!-- 标记 -->
          <el-amap-marker
            v-for="(marker, index) in markers"
            :position="marker"
            :key="index"
          ></el-amap-marker>
        </el-amap>
        <!-- <div class="dialog-footer flex-row flex-center" v-if="!see">
            <el-button
                class="btn submit"
                :disabled="lng == '' || lat == '' ? true : false"
                @click="clickSureMap()"
                >确定</el-button
            >
            <el-button class="btn reset" @click="clickCancleMap()"
                >取消</el-button
            >
        </div> -->
      </div>
    </div>
    <div class="login-outbtn">
      <el-button type="primary" @click="getZuo">确认坐标</el-button>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import AmapVue from "vue-amap";
Vue.use(AmapVue);
AmapVue.initAMapApiLoader({
  key: "1116d18ed93c6466ae88c6e90b1dd6f6",
  plugin: [
    "AMap.Scale",
    "AMap.Autocomplete",
    "AMap.OverView",
    "AMap.ToolBar",
    "AMap.MapType",
    "AMap.PlaceSearch",
    "AMap.Geolocation",
    "AMap.Geocoder",
  ],
  v: "1.4.4",
  uiVersion: "1.0",
});
import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
import { bd09togcj02 } from "@/utils/zuobaio";
const amapManagers = new AMapManager();

export default {
  data() {
    const self = this;
    return {
      radioSearch: "0",
      address: null,
      searchKey: "",
      amapManager: amapManagers,
      markers: [],
      searchOption: {
        city: "",
        citylimit: true,
      },
      center: [121.329402, 31.228667],
      zoom: 12,
      lng: 0,
      lat: 0,
      see: false,
      loaded: false,
      events: {
        init() {
          lazyAMapApiLoaderInstance.load().then(() => {
            self.initSearch();
          });
        },
        // 点击获取地址的数据
        click(e) {
          self.markers = [];
          const { lng, lat } = e.lnglat;
          self.lng = lng;
          self.lat = lat;
          self.center = [lng, lat];
          self.markers.push([lng, lat]);
          // 这里通过高德 SDK 完成。
          const geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all",
          });
          geocoder.getAddress([lng, lat], function (status, result) {
            if (status === "complete" && result.info === "OK") {
              if (result && result.regeocode) {
                self.address = result.regeocode.formattedAddress;
                self.searchKey = result.regeocode.formattedAddress;
                self.$nextTick();
                const poi = result.regeocode.addressComponent;
                const d = {
                  pos: [lng, lat],
                  adname: poi.district,
                  // name: poi.name,
                  address: self.address,
                };

                self.$emit("poi", d);
              }
            }
          });
        },
      },
      // 一些工具插件
      plugin: [
        {
          // 定位
          pName: "Geolocation",
          events: {
            init(o) {
              // o是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  // 设置经度
                  self.lng = self.lnglat.lng || result.position.lng;
                  // 设置维度
                  self.lat = self.lnglat.lat || result.position.lat;
                  // 设置坐标
                  self.center = [self.lng, self.lat];
                  self.markers.push([self.lng, self.lat]);
                  // load
                  self.loaded = true;
                  // 页面渲染好后
                  self.$nextTick();
                }
              });
            },
          },
        },
        {
          // 搜索
          pName: "PlaceSearch",
          events: {
            init(instance) {
              console.log(instance);
            },
          },
        },
      ],
    };
  },
  props: ["lanlat"],

  mounted() {
    this.initDw();
    //   let point=JSON.parse(this.lanlat)
    //   this.lng=point.lng
    //     this.lat=point.lat
    //   console.log(point)
    // this.$nextTick(() => {
    //     this.searchKey = this.lnglat.address;
    //     this.center = [this.lng, this.lat];

    // });
  },
  methods: {
    initDw() {
      let point = JSON.parse(this.lanlat);
      let pointData = bd09togcj02(Number(point.lng), Number(point.lat));
      console.log(bd09togcj02(Number(point.lng), Number(point.lat)));
      // console.log(point)
      // debugger
      // this.lng=point.lng
      // this.lat=point.lat
      this.lng = pointData[0];
      this.lat = pointData[1];
      console.log(point);
      this.$nextTick(() => {
        this.searchKey = this.lnglat.address;
        this.center = [this.lng, this.lat];
      });
    },
    getZuo() {
      this.position = [this.lng, this.lat];
      if (this.position && this.position.length > 0) {
        this.$emit("zuobiao", this.position);
      } else {
        this.$message("请先选择坐标！");
      }
    },
    initSearch() {
      const vm = this;
      const map = this.amapManager.getMap();
      console.log(AMapUI);
      AMapUI.loadUI(["misc/PoiPicker"], function (PoiPicker) {
        var poiPicker = new PoiPicker({
          input: "search",
          placeSearchOptions: {
            map: map,
            pageSize: 11,
          },
          suggestContainer: "searchTip",
          searchResultsContainer: "searchTip",
        });
        vm.poiPicker = poiPicker;
        // 监听poi选中信息
        poiPicker.on("poiPicked", function (poiResult) {
          const source = poiResult.source;
          const poi = poiResult.item;
          if (source !== "search") {
            poiPicker.searchByKeyword(poi.name);
          } else {
            poiPicker.clearSearchResults();
            vm.markers = [];
            const lng = poi.location.lng;
            const lat = poi.location.lat;
            const address = poi.cityname + poi.adname + poi.name;
            vm.center = [lng, lat];
            vm.markers.push([lng, lat]);
            vm.lng = lng;
            vm.lat = lat;
            vm.address = address;
            vm.searchKey = address;
            const d = {
              pos: [lng, lat],
              adname: poi.adname,
              name: poi.name,
              address:
                poi.pname +
                " " +
                poi.cityname +
                " " +
                poi.adname +
                " " +
                poi.address +
                " " +
                poi.name,
            };
            vm.$emit("poi", d);
          }
        });
      });
    },
    searchByHand() {
      if (this.radioSearch == 0) {
        if (this.searchKey !== "") {
          this.poiPicker.searchByKeyword(this.searchKey);
        }
      } else {
        this.center = [this.lng, this.lat]; //设置中心点
        this.markers = []; //清空
        this.markers.push([this.lng, this.lat]); //设置点位置
      }
    },
    clickSureMap() {
      this.$emit("clickClose", {
        lng: this.lng,
        lat: this.lat,
        address: this.address,
      });
    },
    clickCancleMap() {
      this.$emit("clickClose");
    },
  },
  watch: {
    lanlat(value) {
      this.initDw();
      //   if(value){
      //     this.position=[JSON.parse(value).lan,JSON.parse(value).lat]
      //     this.center = [...this.position];
      //     console.log('赋值了')
      //   }else{
      //     this.position=null
      //     console.log('清空了')
      //   }
    },
  },
};
</script>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 550px;
}
.mapcontainer {
  height: 550px;
  position: relative;
}
.amap-box {
  height: 550px;
  width: 100%;
}
.result-panel {
  background: rgba(12, 100, 134, 0.8);
  position: absolute;
  padding: 16px 24px;
  left: 10px;
  top: 10px;
  width: 320px;
  display: flex;
  flex-direction: column;

  .search-bar {
    display: flex;
    align-items: center;
    .text {
      text-overflow: ellipsis;
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  .result-list.ant-list-loading {
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.info {
  position: absolute;
  background: rgba(12, 100, 134, 0.8);
  right: 10px;
  top: 10px;
  padding-left: 24px;
  padding: 16px 24px;
}
</style>
<style lang="scss">
::v-deep.amap-logo {
  display: none; //去掉高德地图logo
}
::v-deep.amap-copyright {
  opacity: 0; //去掉高德的版本号
}
</style>
